<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="utf-8"> 
  <meta content="width=device-width, initial-scale=1.0" name="viewport"> 
  <title>
   年度规划项目 - 学员端
  </title> 
  <script src="../javascript/reload.js">
  </script> 
  <script src="./1969803110087917568/resource_3007610000.js">
  </script> 
  <link href="./1969803110087917568/all.min.css" rel="stylesheet"> 
  <script src="./1969803110087917568/echarts.min.js">
  </script> 
  <script>
   tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }
  </script> 
  <style type="text/tailwindcss">
   @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
            .badge-gray {
                @apply bg-gray-100 text-gray-700;
            }
            .stat-card {
                @apply bg-white rounded-lg p-5 card-shadow transition-all duration-300 hover:shadow-lg;
            }
            .progress-ring-container {
                @apply relative flex items-center justify-center w-32 h-32 mx-auto;
            }
            .progress-ring-text {
                @apply absolute text-center;
            }
            .progress-ring-value {
                @apply text-2xl font-bold text-primary;
            }
            .progress-ring-label {
                @apply text-xs text-text-tertiary;
            }
        }
  </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out" id="sidebar"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <!-- 每月必做 --> 
   <div class="menu-group">
    <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1181&amp;h=762&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
     <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-pe1s4" style="background-color:#ffffffff"> 
      <div class="flex items-center"> 
       <i class="fas fa-calendar-check text-lg mr-3"> </i> 
       <span class="" contenteditable="false" style="outline: none;"> 工作台 </span> 
      </div> 
     </div> </a> 
    <div class="submenu hidden" id="submenu-monthly"> 
    </div> 
   </div> 
   <!-- 公司公告 --> 
   <div class="menu-group"> 
    <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1170&amp;h=728&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
     <div class="menu-item flex justify-between" data-menu="announcements" data-selectorname="#id-wgtje" style="background-color:#ffffffff"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullhorn text-lg mr-3"> </i> 
       <span> 公司公告 </span> 
      </div> 
     </div> </a> 
    <div class="submenu hidden" id="submenu-announcements"> 
    </div> 
   </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between menu-item-active" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-planning"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967790023482802176&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="goal-dashboard" data-selectorname="#id-fu447" style=""> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span style=""> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967822263025664000&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item submenu-item-active" data-page="performance-entry" data-selectorname="#id-zz6el" style=""> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-o7i6w" style=""> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-yvhab" style=""> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-eyl04" style=""> 
        <i class="fas fa-users text-xs mr-2"> </i> 
        <span> 客户档案 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-l6xtb" style=""> 
        <i class="fas fa-trophy text-xs mr-2"> </i> 
        <span> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="work"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-work"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-5odbl" data-ytextravalue="extra-r73yvc9mw" style=""> 
        <i class="fas fa-chart-bar text-xs mr-2" data-ytindex="0" data-ytoriginindex="0"> </i> 
        <span data-ytindex="1" data-ytoriginindex="1" data-ytparentvalue="extra-r73yvc9mw" style=""> 周日报管理 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-uk7jx" style=""> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span style=""> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-e6d40" style=""> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" data-ytextravalue="extra-1f77idw5g" id="submenu-learning"> 
      <div class="submenu-item" data-page="company-culture" data-ytindex="0" data-ytoriginindex="0"> 
       <i class="fas fa-building text-xs mr-2"> </i> 
       <span> 企业文化 </span> 
      </div> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" data-ytindex="1" data-ytoriginindex="1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-vu2di" style=""> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-6neft" data-ytindex="2" data-ytoriginindex="2" data-ytparentvalue="extra-1f77idw5g" style="opacity: 1;"> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="learning-plan" data-selectorname="#id-wbesp" data-ytindex="3" data-ytoriginindex="3" style=""> 
        <i class="fas fa-clipboard-list text-xs mr-2" style=""> </i> 
        <span style=""> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-pkt67" style=""> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span style=""> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-uiycm" style=""> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"> 
    <div class="flex items-center"> 
     <button class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200" id="toggle-sidebar"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 年规管理 </span> 
      <i class="fas fa-angle-right mx-2 text-xs"> </i> 
      <span> 业绩回填 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64" placeholder="搜索..." type="text"> 
      <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200" src="./1969803110087917568/1200x630.png"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- [MODULE] abc_主内容区域 --> 
    <main class="x"> 
     <!-- [MODULE] d23_业绩回填页面 --> 
     <div class="x" id="performance-entry-page"> 
      <!-- 业绩回填页面 --> 
      <div class="page active" id="page-performance-entry"> 
       <div class="flex justify-between items-center mb-6"> 
        <h2 class="text-2xl font-bold"> 业绩回填 </h2> 
        <div class="flex space-x-3"> 
         <button class="btn-outline" id="export-template-btn"> <i class="fas fa-file-export mr-2"> </i> 导出模板 </button> 
         <button class="btn-secondary" id="import-btn"> <i class="fas fa-file-import mr-2"> </i> 导入 </button> 
         <button class="btn-primary" id="add-performance-btn"> <i class="fas fa-plus mr-2"> </i> 添加业绩 </button> 
        </div> 
       </div> 
       <!-- [MODULE] 33f_业绩回填页面:卡片统计 --> 
       <div class="x"> 
        <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-chart-pie text-primary mr-2"> </i> 业绩统计 </h3> 
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> 
         <!-- 本月新增订单 --> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            本月新增订单 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             28 
           </div> 
           <div class="text-green-500 text-sm flex items-center"> 
            <i class="fas fa-arrow-up mr-1"> </i> 12% 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 较上月新增3单 
          </div> 
         </div> 
         <!-- 累计成交金额 --> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            累计成交金额 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             $128,500 
           </div> 
           <div class="text-green-500 text-sm flex items-center"> 
            <i class="fas fa-arrow-up mr-1"> </i> 8.5% 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 目标完成率75% 
          </div> 
         </div> 
         <!-- 平均订单金额 --> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            平均订单金额 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             $4,589 
           </div> 
           <div class="text-red-500 text-sm flex items-center"> 
            <i class="fas fa-arrow-down mr-1"> </i> 2.3% 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 较上月略有下降 
          </div> 
         </div> 
         <!-- 待处理订单 --> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            待处理订单 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             5 
           </div> 
           <div class="text-yellow-500 text-sm flex items-center"> 
            <i class="fas fa-exclamation-circle mr-1"> </i> 需处理 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 逾期未处理: 2单 
          </div> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 33f_业绩回填页面:卡片统计 -- 包含本月新增订单、累计成交金额、平均订单金额和待处理订单四个统计卡片 --> 
       <!-- [MODULE] 7a3_业绩回填页面:添加业绩抽屉弹窗 --> 
       <!-- 右侧抽屉弹窗 - 添加业绩记录 --> 
       <div class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden" id="add-performance-drawer"> 
        <div class="absolute right-0 top-0 bottom-0 w-full max-w-2xl bg-white shadow-xl transform transition-transform duration-300 ease-in-out translate-x-full" id="drawer-content"> 
         <div class="p-5 border-b border-neutral-dark flex justify-between items-center sticky top-0 bg-white z-10"> 
          <h3 class="text-lg font-semibold"> 添加业绩记录 </h3> 
          <button class="text-text-secondary hover:text-text-primary transition-colors duration-200 p-2" id="close-drawer"> <i class="fas fa-times text-xl"> </i> </button> 
         </div> 
         <div class="p-5 overflow-y-auto max-h-[calc(100vh-130px)]"> 
          <form> 
           <div class="grid grid-cols-2 gap-4 mb-4"> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 客户联系人名字 <span class="text-red-500"> * </span> </label> 
             <div class="flex space-x-2"> 
              <select class="input-field" name="contactName" required> <option value=""> 请选择客户联系人 </option> <option value="科技创新有限公司"> 科技创新有限公司 </option> <option value="绿色能源发展公司"> 绿色能源发展公司 </option> <option value="环球贸易集团"> 环球贸易集团 </option> <option value="未来科技有限公司"> 未来科技有限公司 </option> <option value="新锐广告公司"> 新锐广告公司 </option> </select> 
              <button class="btn-secondary whitespace-nowrap" type="button"> <i class="fas fa-plus mr-1"> </i> 添加客户 </button> 
             </div> 
            </div> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 电子邮箱 <span class="text-red-500"> * </span> </label> 
             <input class="input-field" name="email" placeholder="请输入电子邮箱" required type="email"> 
            </div> 
           </div> 
           <div class="grid grid-cols-2 gap-4 mb-4"> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 产品品名 <span class="text-red-500"> * </span> </label> 
             <div class="relative"> 
              <div class="border border-neutral-dark rounded-md p-2 min-h-[38px] flex flex-wrap gap-2 bg-white"> 
               <input name="productName" required type="hidden" value=""> 
               <div class="flex-1 min-w-[100px]">
                 请选择产品品名（可多选） 
               </div> 
               <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> 
                <i class="fas fa-chevron-down"> </i> 
               </div> 
              </div> 
              <div class="absolute z-10 mt-1 w-full bg-white border border-neutral-dark rounded-md shadow-lg max-h-60 overflow-y-auto hidden"> 
               <div class="p-2"> 
                <div class="relative mb-2"> 
                 <input class="input-field text-sm" placeholder="搜索产品..." type="text"> 
                 <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary text-sm"> </i> 
                </div> 
                <div class="space-y-1"> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="product-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="企业版软件套餐"> <span> 企业版软件套餐 </span> </label> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="product-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="高级硬件设备"> <span> 高级硬件设备 </span> </label> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="product-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="基础版软件+服务"> <span> 基础版软件+服务 </span> </label> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="product-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="定制开发服务"> <span> 定制开发服务 </span> </label> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="product-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="高级版软件"> <span> 高级版软件 </span> </label> 
                </div> 
               </div> 
              </div> 
             </div> 
             <p class="text-xs text-text-tertiary mt-1"> 点击选择多个产品（可多选） </p> 
            </div> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 国别地区 <span class="text-red-500"> * </span> </label> 
             <select class="input-field" name="country" required> <option value=""> 请选择地区 </option> <option value="CN"> 中国 </option> <option value="US"> 美国 </option> <option value="JP"> 日本 </option> <option value="GB"> 英国 </option> <option value="Other"> 其他 </option> </select> 
            </div> 
           </div> 
           <div class="grid grid-cols-2 gap-4 mb-4"> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 供应商 </label> 
             <div class="relative"> 
              <div class="border border-neutral-dark rounded-md p-2 min-h-[38px] flex flex-wrap gap-2 bg-white"> 
               <input name="supplier" type="hidden" value=""> 
               <div class="flex-1 min-w-[100px]">
                 请选择供应商（可多选） 
               </div> 
               <div class="absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> 
                <i class="fas fa-chevron-down"> </i> 
               </div> 
              </div> 
              <div class="absolute z-10 mt-1 w-full bg-white border border-neutral-dark rounded-md shadow-lg max-h-60 overflow-y-auto hidden"> 
               <div class="p-2"> 
                <div class="relative mb-2"> 
                 <input class="input-field text-sm" placeholder="搜索供应商..." type="text"> 
                 <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary text-sm"> </i> 
                </div> 
                <div class="space-y-1"> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="supplier-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="科技软件有限公司"> <span> 科技软件有限公司 </span> </label> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="supplier-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="硬件设备供应商"> <span> 硬件设备供应商 </span> </label> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="supplier-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="服务解决方案提供商"> <span> 服务解决方案提供商 </span> </label> 
                 <label class="flex items-center p-2 hover:bg-neutral rounded cursor-pointer"> <input class="supplier-checkbox mr-2 text-primary focus:ring-primary" type="checkbox" value="定制开发服务商"> <span> 定制开发服务商 </span> </label> 
                </div> 
               </div> 
              </div> 
             </div> 
             <p class="text-xs text-text-tertiary mt-1"> 点击选择多个供应商（可多选） </p> 
            </div> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 合同号 <span class="text-red-500"> * </span> </label> 
             <input class="input-field" name="contractNumber" placeholder="例如：HT-202311001" required type="text"> 
            </div> 
           </div> 
           <div class="grid grid-cols-2 gap-4 mb-4"> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 订单成交月份 <span class="text-red-500"> * </span> </label> 
             <input class="input-field" name="orderMonth" required type="month"> 
            </div> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 成交金额(USD) <span class="text-red-500"> * </span> </label> 
             <input class="input-field" min="0" name="amountUSD" placeholder="0.00" required step="0.01" type="number"> 
            </div> 
           </div> 
           <div class="grid grid-cols-2 gap-4 mb-4"> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 汇率 <span class="text-red-500"> * </span> </label> 
             <input class="input-field" min="0" name="exchangeRate" placeholder="7.0000" required step="0.0001" type="number"> 
            </div> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 每单毛利(USD) </label> 
             <input class="input-field" min="0" name="grossProfitUSD" placeholder="0.00" step="0.01" type="number"> 
            </div> 
           </div> 
           <div class="grid grid-cols-2 gap-4 mb-4"> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 每单利润(CNY) </label> 
             <input class="input-field" min="0" name="profit" placeholder="0.00" step="0.01" type="number"> 
            </div> 
            <div> 
             <label class="block text-sm font-medium text-text-secondary mb-1"> 个人成交金额合计(USD) </label> 
             <input class="input-field" min="0" name="personalTotalUSD" placeholder="0.00" step="0.01" type="number"> 
            </div> 
           </div> 
           <div class="mb-4"> 
            <label class="block text-sm font-medium text-text-secondary mb-1"> 团队成交金额合计(CNY) </label> 
            <input class="input-field" min="0" name="teamTotal" placeholder="0.00" step="0.01" type="number"> 
           </div> 
           <div class="mb-4"> 
            <label class="block text-sm font-medium text-text-secondary mb-1"> 附件上传 </label> 
            <div class="border-2 border-dashed border-neutral-dark rounded-md p-6 text-center hover:border-primary transition-colors duration-200 cursor-pointer"> 
             <i class="fas fa-cloud-upload-alt text-3xl text-text-tertiary mb-2"> </i> 
             <p class="text-text-secondary mb-1"> 点击或拖拽文件至此处上传 </p> 
             <p class="text-xs text-text-tertiary"> 支持PDF、Word、Excel格式，单个文件不超过10MB </p> 
            </div> 
           </div> 
          </form> 
         </div> 
         <div class="p-5 border-t border-neutral-dark flex justify-end space-x-3 sticky bottom-0 bg-white"> 
          <button class="btn-outline px-6" id="cancel-add-performance"> 取消 </button> 
          <button class="btn-primary px-6"> 保存 </button> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 7a3_业绩回填页面:添加业绩抽屉弹窗 -- 右侧抽屉式弹窗，包含添加业绩记录的表单，包含客户信息、产品信息、成交信息等表单字段和附件上传功能 --> 
       <!-- [MODULE] 45d_业绩回填页面:筛选条件 --> 
       <div class="x mb-6"> 
        <div class="bg-white rounded-lg card-shadow p-6"> 
         <h3 class="text-lg font-semibold mb-4"> 筛选条件 </h3> 
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> 
          <div> 
           <label class="block text-text-secondary text-sm font-medium mb-2"> 成交月份 </label> 
           <div class="relative"> 
            <select class="input-field pr-8 appearance-none"> <option value=""> 全部月份 </option> <option value="1"> 1月 </option> <option value="2"> 2月 </option> <option value="3"> 3月 </option> <option value="4"> 4月 </option> <option value="5"> 5月 </option> <option value="6"> 6月 </option> <option value="7"> 7月 </option> <option value="8"> 8月 </option> <option value="9"> 9月 </option> <option value="10"> 10月 </option> <option value="11"> 11月 </option> <option value="12"> 12月 </option> </select> 
            <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> </i> 
           </div> 
          </div> 
          <div> 
           <label class="block text-text-secondary text-sm font-medium mb-2"> 产品类别 </label> 
           <div class="relative"> 
            <select class="input-field pr-8 appearance-none"> <option value=""> 全部产品 </option> <option value="electronics"> 电子产品 </option> <option value="clothing"> 服装 </option> <option value="furniture"> 家具 </option> <option value="beauty"> 美妆 </option> <option value="food"> 食品 </option> </select> 
            <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> </i> 
           </div> 
          </div> 
          <div> 
           <label class="block text-text-secondary text-sm font-medium mb-2"> 客户名称 </label> 
           <input class="input-field" placeholder="请输入客户名称" type="text"> 
          </div> 
          <div> 
           <label class="block text-text-secondary text-sm font-medium mb-2"> 订单状态 </label> 
           <div class="relative"> 
            <select class="input-field pr-8 appearance-none"> <option value=""> 全部状态 </option> <option value="pending"> 待审核 </option> <option value="approved"> 已审核 </option> <option value="rejected"> 已驳回 </option> </select> 
            <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> </i> 
           </div> 
          </div> 
         </div> 
         <div class="flex justify-end mt-6 space-x-3"> 
          <button class="btn-outline" id="reset-filter-btn"> <i class="fas fa-redo mr-2"> </i> 重置 </button> 
          <button class="btn-primary" id="search-btn"> <i class="fas fa-search mr-2"> </i> 查询 </button> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 45d_业绩回填页面:筛选条件 -- 包含成交月份、产品类别、客户名称和订单状态四个筛选条件，以及重置和查询按钮 --> 
       <!-- [MODULE] 56g_业绩回填页面:统计图表 --> 
       <div class="x mb-8"> 
        <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-chart-line text-primary mr-2"> </i> 业绩趋势分析 </h3> 
        <div class="bg-white rounded-lg card-shadow p-6"> 
         <div class="w-full h-80" id="performance-trend-chart"> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 56g_业绩回填页面:统计图表 -- 展示业绩趋势分析折线图 --> 
       <!-- [MODULE] 67e_业绩回填页面:列表数据 --> 
       <div class="x"> 
        <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-list-alt text-primary mr-2"> </i> 业绩列表 </h3> 
        <div class="bg-white rounded-lg card-shadow overflow-hidden"> 
         <div class="overflow-x-auto"> 
          <table class="min-w-full divide-y divide-neutral-dark"> 
           <thead> 
            <tr> 
             <th class="table-header text-left w-16"> 订单编号 </th> 
             <th class="table-header text-left"> 客户联系人 </th> 
             <th class="table-header text-left"> 电子邮箱 </th> 
             <th class="table-header text-left"> 产品品名 </th> 
             <th class="table-header text-left"> 成交金额(USD) </th> 
             <th class="table-header text-left"> 成交月份 </th> 
             <th class="table-header text-left"> 状态 </th> 
             <th class="table-header text-left w-24"> 操作 </th> 
            </tr> 
           </thead> 
           <tbody class="divide-y divide-neutral-dark"> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> ORD-2023-001 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="客户头像" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969803110087917568/1200x630.png"> 
               <span> 李娜 </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> lina@example.com </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 智能手表 Pro </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> $12,500 </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-10 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-success"> 已审核 </span> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex space-x-2"> 
               <button class="text-primary hover:text-accent" title="查看"> <i class="fas fa-eye"> </i> </button> 
               <button class="text-text-secondary hover:text-text-primary" title="编辑"> <i class="fas fa-edit"> </i> </button> 
              </div> </td> 
            </tr> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> ORD-2023-002 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="客户头像" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969803110087917568/1200x630.png"> 
               <span> 王强 </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> wangqiang@example.com </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 无线耳机 Max </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> $8,300 </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-10 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-success"> 已审核 </span> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex space-x-2"> 
               <button class="text-primary hover:text-accent" title="查看"> <i class="fas fa-eye"> </i> </button> 
               <button class="text-text-secondary hover:text-text-primary" title="编辑"> <i class="fas fa-edit"> </i> </button> 
              </div> </td> 
            </tr> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> ORD-2023-003 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="客户头像" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969803110087917568/1200x630.png"> 
               <span> 陈静 </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> chenjing@example.com </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 运动手环 Lite </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> $5,200 </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-10 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-warning"> 待审核 </span> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex space-x-2"> 
               <button class="text-primary hover:text-accent" title="查看"> <i class="fas fa-eye"> </i> </button> 
               <button class="text-text-secondary hover:text-text-primary" title="编辑"> <i class="fas fa-edit"> </i> </button> 
              </div> </td> 
            </tr> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> ORD-2023-004 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="客户头像" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969803110087917568/1200x630.png"> 
               <span> 刘伟 </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> liuwei@example.com </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 智能音箱 Mini </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> $3,800 </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-09 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-danger"> 已驳回 </span> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex space-x-2"> 
               <button class="text-primary hover:text-accent" title="查看"> <i class="fas fa-eye"> </i> </button> 
               <button class="text-text-secondary hover:text-text-primary" title="编辑"> <i class="fas fa-edit"> </i> </button> 
              </div> </td> 
            </tr> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> ORD-2023-005 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="客户头像" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969803110087917568/1200x630.png"> 
               <span> 赵琳 </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> zhaolin@example.com </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 健康监测仪 </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> $6,700 </td> 
             <td class="px-4 py-4 whitespace-nowrap text-sm"> 2023-09 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="badge badge-success"> 已审核 </span> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex space-x-2"> 
               <button class="text-primary hover:text-accent" title="查看"> <i class="fas fa-eye"> </i> </button> 
               <button class="text-text-secondary hover:text-text-primary" title="编辑"> <i class="fas fa-edit"> </i> </button> 
              </div> </td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
         <!-- 分页器 --> 
         <div class="px-6 py-4 border-t border-neutral-dark flex justify-between items-center"> 
          <div class="text-sm text-text-tertiary">
            显示 
           <span class="font-medium"> 1 </span> 到 
           <span class="font-medium"> 5 </span> 条，共 
           <span class="font-medium"> 28 </span> 条记录 
          </div> 
          <div class="flex space-x-1"> 
           <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:bg-neutral disabled:opacity-50" disabled> <i class="fas fa-angle-left"> </i> </button> 
           <button class="w-9 h-9 flex items-center justify-center rounded border border-primary bg-primary text-white"> 1 </button> 
           <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 2 </button> 
           <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 3 </button> 
           <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 4 </button> 
           <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> 5 </button> 
           <button class="w-9 h-9 flex items-center justify-center rounded border border-neutral-dark text-text-secondary hover:bg-neutral"> <i class="fas fa-angle-right"> </i> </button> 
          </div> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 67e_业绩回填页面:列表数据 -- 包含订单编号、客户联系人、电子邮箱、产品品名、成交金额(USD)、成交月份和操作等列的表格，以及分页器 --> 
      </div> 
     </div> 
     <!-- [/MODULE] d23_业绩回填页面 -- 包含卡片统计、筛选条件、统计图表和列表数据等模块 --> 
    </main> 
    <!-- [/MODULE] abc_主内容区域 -- 包含业绩回填页面 --> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-company-culture"> 
    </div> 
    <div class="page hidden" id="page-work-dashboard"> 
    </div> 
    <div class="page hidden" id="page-meeting-plan"> 
    </div> 
    <div class="page hidden" id="page-work-tasks"> 
    </div> 
    <div class="page hidden" id="page-monthly-tasks"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-goal-dashboard"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-customer-records"> 
    </div> 
    <div class="page hidden" id="page-pk-activities"> 
    </div> 
    <div class="page hidden" id="page-course-center"> 
    </div> 
    <div class="page hidden" id="page-knowledge-base"> 
    </div> 
    <div class="page hidden" id="page-learning-plan"> 
    </div> 
    <div class="page hidden" id="page-basic-info"> 
    </div> 
    <div class="page hidden" id="page-account-settings"> 
    </div> 
   </div> 
  </main> 
  <!-- [JSMOD] eft_页面交互逻辑 --> 
  <script id="page-interaction">
   // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 菜单切换功能
            const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                    
                    // 添加当前菜单的活动状态
                    item.classList.add('menu-item-active'); 
                    
                    const menuId = item.getAttribute('data-menu');
                    const submenu = document.getElementById(`submenu-${menuId}`);
                    const icon = item.querySelector('i:last-child');
                    
                    // 切换子菜单显示/隐藏
                    if (submenu.classList.contains('hidden')) {
                        submenu.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                    } else {
                        submenu.classList.add('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单的活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                    
                    // 添加当前子菜单的活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `

<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');  
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                    document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) { submenu.classList.remove('hidden'); }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });
                }
            });
            
            document.getElementById('import-btn').addEventListener('click', () => {
                alert('导入按钮被点击');
                // 这里可以添加打开文件选择对话框的逻辑
            });
            
            document.getElementById('export-template-btn').addEventListener('click', () => {
                alert('导出模板按钮被点击');
                // 这里可以添加导出Excel模板的逻辑
            });
            
            document.getElementById('search-btn').addEventListener('click', () => {
                alert('查询按钮被点击');
                // 这里可以添加执行查询的逻辑
            });
            
            document.getElementById('reset-filter-btn').addEventListener('click', () => {
                alert('重置按钮被点击');
                // 这里可以添加重置筛选条件的逻辑
            });
        });
  </script> 
  <!-- [/JSMOD] eft_页面交互逻辑 -- 处理菜单切换、子菜单切换、侧边栏切换功能，以及业绩回填页面的按钮事件 --> 
  <!-- [JSMOD] fgh_图表渲染逻辑 --> 
  <script id="chart-rendering">
   // 页面加载时初始化图表
        document.addEventListener('DOMContentLoaded', () => {
            // 渲染业绩趋势分析图表
            renderPerformanceTrendChart();
            
            // 监听窗口大小变化，重绘图表
            window.addEventListener('resize', () => {
                if (window.performanceTrendChart) {
                    window.performanceTrendChart.resize();
                }
            });
        });
        
        // 渲染业绩趋势分析图表
        function renderPerformanceTrendChart() {
            const chartDom = document.getElementById('performance-trend-chart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}: ${c}'
                },
                legend: {
                    data: ['成交金额', '订单数量'],
                    top: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '成交金额(USD)',
                        position: 'left',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#F5F7FA'
                            }
                        },
                        formatter: function(value) {
                            if (value >= 1000) {
                                return '$' + (value / 1000) + 'k';
                            }
                            return '$' + value;
                        }
                    },
                    {
                        type: 'value',
                        name: '订单数量',
                        position: 'right',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name: '成交金额',
                        type: 'bar',
                        data: [12000, 19000, 15000, 23000, 21000, 28000, 32000, 29000, 35000, 42000],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#165DFF'},
                                {offset: 1, color: '#4080FF'}
                            ]),
                            borderRadius: [4, 4, 0, 0]
                        },
                        barWidth: '40%'
                    },
                    {
                        name: '订单数量',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [5, 8, 6, 10, 9, 12, 15, 13, 16, 18],
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            color: '#0E42D2'
                        },
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#0E42D2',
                            borderWidth: 2
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: 'rgba(14, 66, 210, 0.2)'},
                                {offset: 1, color: 'rgba(14, 66, 210, 0)'}
                            ])
                        }
                    }
                ]
            };
            
            myChart.setOption(option);
            window.performanceTrendChart = myChart;
        }
  </script> 
  <!-- [/JSMOD] fgh_图表渲染逻辑 -- 负责业绩趋势分析图表的初始化和渲染 -->   
  <!-- [JSMOD] 8b9_业绩回填页面:添加业绩抽屉交互 --> 
  <script>
 document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const addPerformanceBtn = document.getElementById('add-performance-btn');
    const drawer = document.getElementById('add-performance-drawer');
    const drawerContent = document.getElementById('drawer-content');
    const closeDrawerBtn = document.getElementById('close-drawer');
    const cancelBtn = document.getElementById('cancel-add-performance');
    
    // 打开抽屉
    const openDrawer = () => {
        drawer.classList.remove('hidden');
        // 使用setTimeout确保过渡动画生效
        setTimeout(() => {
            drawerContent.classList.remove('translate-x-full');
        }, 10);
        // 阻止背景滚动
        document.body.style.overflow = 'hidden';
    };
    
    // 关闭抽屉
    const closeDrawer = () => {
        drawerContent.classList.add('translate-x-full');
        // 等待过渡动画完成后隐藏遮罩
        setTimeout(() => {
            drawer.classList.add('hidden');
            // 恢复背景滚动
            document.body.style.overflow = '';
        }, 300);
    };
    
    // 事件监听
    if (addPerformanceBtn) {
        addPerformanceBtn.addEventListener('click', openDrawer);
    }
    
    if (closeDrawerBtn) {
        closeDrawerBtn.addEventListener('click', closeDrawer);
    }
    
    if (cancelBtn) {
        cancelBtn.addEventListener('click', closeDrawer);
    }
    
    // 点击遮罩关闭抽屉
    if (drawer) {
        drawer.addEventListener('click', (e) => {
            if (e.target === drawer) {
                closeDrawer();
            }
        });
    }
    
    // 监听窗口大小变化，调整抽屉位置
    window.addEventListener('resize', () => {
        if (!drawer.classList.contains('hidden') && drawerContent.classList.contains('translate-x-full')) {
            drawerContent.classList.remove('translate-x-full');
        }
    });
});
</script> 
  <!-- [/JSMOD] 8b9_业绩回填页面:添加业绩抽屉交互 -- 实现点击添加业绩按钮打开右侧抽屉弹窗，点击关闭按钮、取消按钮或遮罩关闭弹窗的交互逻辑 --> 
 </body>
</html>